<script setup lang="ts">
import {computed, nextTick, ref} from 'vue'
import {useRouter} from "vue-router";
import useRespondentStore from '@/stores/respondent'

const router = useRouter()
const respondentStore = useRespondentStore()
const isCollapse = ref(false)
const menus=computed(()=>respondentStore.menus)

const menuTitleMap=new Map()
menuTitleMap.set('/respondent/mediating','调解中案件')
menuTitleMap.set('/respondent/completed','已结案案件')
menuTitleMap.set('/respondent/apply','已申请案件')
menuTitleMap.set('/respondent/profile','个人信息')
menuTitleMap.set('/respondent/change-password','修改账号')

const defaultActive=computed(()=>{
	return router.currentRoute.value.path || '/respondent/mediating'
})
</script>


<template>
	<div style="height: 100vh; background-color: #232323;">
		<div class="menu-header">
			<span>法院调解平台</span>
		</div>
		<el-menu
			active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
			:default-active="defaultActive"
			router
			class="el-menu-vertical"
			:collapse="isCollapse"

		>
			<el-sub-menu v-for="menu in menus" :key="menu.id" :index="menu.id">
				<template #title>
					<el-icon><component :is="menu.icon"/></el-icon>
					<span>{{menu.title}}</span>
				</template>
				<el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path">
					{{child.title}}
				</el-menu-item>
			</el-sub-menu>
		</el-menu>
	</div>
</template>

<style scoped lang="css">
.el-menu-vertical{
	height: auto;
}
.menu-header{
	box-sizing: border-box;
	background-color: #232323;
	color: #fff;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}


</style>